import React, { useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Badge, NavBar, Icon } from 'antd-mobile';
import { AuthContext } from '../context/AuthContext';
import { CartContext } from '../context/CartContext';

const Header = () => {
  const { isAuthenticated, logout } = useContext(AuthContext);
  const { cartItems } = useContext(CartContext);
  const navigate = useNavigate();

  const cartItemCount = cartItems.reduce((total, item) => total + item.quantity, 0);

  return (
    <NavBar
    // 导航浅色模式
      mode="light"
      leftContent={<Link to="/" style={{ color: '#1890ff', fontWeight: 'bold' }}>光合优选</Link>}
      rightContent={[
        <div key="cart" style={{ marginRight: '15px' }}>
          <Badge text={cartItemCount} overflowCount={99}>
            <Icon 
              type="shopping-cart" 
              size="md" 
              color="#1890ff" 
              onClick={() => navigate('/cart')} 
            />
          </Badge>
        </div>,
        isAuthenticated ? (
          <div key="user" onClick={logout} style={{ cursor: 'pointer' }}>
            <Icon type="logout" size="md" color="#1890ff" />
          </div>
        ) : (
          <div key="login" onClick={() => navigate('/login')} style={{ cursor: 'pointer' }}>
            <Icon type="user" size="md" color="#1890ff" />
          </div>
        )
      ]}
      style={{ 
        position: 'fixed', 
        top: 0, 
        width: '100%', 
        zIndex: 100,
        borderBottom: '1px solid #eee'
      }}
    />
  );
};

export default Header;